<template>
  <div class="p-24">
    <div class="info-card">
      <img :src="detail.avatar" alt="" />
      <div class="msg">
        <div class="name">{{ detail.name }}</div>
        <div class="val">
          微信昵称: <span class="val">{{ detail.nickname }}</span>
        </div>
        <div class="d-flex my-16" v-if="detail.personalityTag && detail.personalityTag.split(',')?.length">
          <!-- <span class="val">常用{{ detail.package }}</span> -->
          <span class="val" v-for="item in detail.personalityTag.split(',')">{{ item }}</span>
          <!-- <span class="val">{{ detail.hairlong }}</span> -->
        </div>
        <div class="d-flex">
          <!-- <span class="val">{{ detail.year }}</span> -->
          <span class="val">{{ detail.phone }}</span>
        </div>
      </div>
    </div>
    <div class="record-list">
      <div class="title">消费记录</div>
      <div
        v-for="(item, index) in detail.orderList"
        :key="item.id || index"
        class="record-item"
      >
        <div>
          <span>订单编号: </span>
          <span>{{ item.orderNo }}</span>
        </div>
        <div>
          <span>设备编号: </span>
          <span>{{ item.deviceNo }}</span>
        </div>
        <div>
          <span>套餐名称: </span>
          <span>{{ item.packageName }}</span>
        </div>
        <div class="d-flex j-sb">
          <div>
            <span>时间: </span> <span>{{ item.createTime }}</span>
          </div>
          <div style="color: #303030">
            <span>时长: </span> <span>{{ item.time }}分钟</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { postCustomerDetail } from "@/api";
const route = useRoute();
const detail = ref({
  // name: "刘广达",
  // wechat: "lgdhsas002",
  // package: "套餐A",
  // hairType: "干性发质",
  // hairlong: "短发",
  // year: "90后",
  // phone: "15915847222",
});
const getDetail = () => {
  console.log(route.query.id);
  postCustomerDetail({ id: route.query.id }).then((res) => {
    detail.value = res.data;
  });
};
onMounted(() => {
  getDetail();
});
</script>

<style lang="less" scoped>
.info-card {
  background: #fff;
  display: flex;
  padding: 24px 12px;
  border-radius: 10px;
  box-shadow: 0 0 15px #f5f5f5;
  margin-bottom: 40px;
  img {
    width: 140px;
    height: 140px;
    background: #ccc;
    border-radius: 50%;
    margin-right: 20px;
  }
  .msg {
    padding-top: 15px;

    .name {
      font-size: 38px;
      margin-bottom: 25px;
    }
    .val {
      font-size: 28px;
      font-weight: 600;
      color: #858585;
      margin-right: 20px;
    }
  }
}
.title {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 30px;
  color: #272727;
}
.record-item {
  color: #868686;
  font-size: 28px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid #efecec;
  padding: 0 10px 20px;
  &:not(:last-child) {
    margin-bottom: 30px;
  }
}
</style>
